<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>后台首页</title>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- Bootstrap -->
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
        <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
        <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
        <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
        <!-- 工具 -->
        <script src="js/HttpUtil.js"></script>
        <title>后台主页面</title>
        <style>
            @media ( min-width :768px ) {
                #left_tab {
                    width: 250px;
                    position: absolute;
                    z-index: 1;
                    height: 640px;
                }
                .mysearch {
                    margin: 10px;
                }
                .page_main {
                    margin-left: 255px;
                }
                .dv_content{
                    width: 100%;
                    height: 500px;
                }
            }
        </style>
    </head>
<body>
<!--导航 -->
<div style="width: 80%;margin-left: 10%;">
    <nav class="navbar navbar-default navbar-static-top">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#left_tab,#top_right">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a href="#" class="navbar-brand">网站后台管理</a>
        </div>
        <ul id="top_right" class="collapse navbar-collapse nav navbar-nav navbar-right"	style="margin-right: 20px;">
            <li>
                <a href="http://localhost:8080/shop_app/firstPage.html">
                    <span class="badge"	style="background-color: pink">消息</span>
                </a>
            </li>
            <li>
                <a href="http://localhost:8080/shop_app/firstPage.html">
                    <span class="badge"	style="background-color: #b3d694;">首页</span>
                </a>
            </li>
            <li>
                <a href="#" onclick="UserLogout()">
                    <span class="glyphicon glyphicon-off">注销</span>
                </a>
            </li>
        </ul>
        <!--左侧边栏 -->
        <div id="left_tab" style="margin-top: 70px;" class="collapse navbar-default navbar-collapse">
            <ul class="nav panel-group" id="myPanel">
                <!--栏目-->
                <li class="panel">
                    <a href="#sub1" data-toggle="collapse" data-parent="#myPanel"> 用户管理
                        <span class="glyphicon glyphicon-triangle-bottom pull-right"></span>
                    </a>
                    <ul id="sub1" class="nav collapse panel-collapse">
                        <li>
                            <a href="#" id="merchants" class="showUser1">
                                <span class="glyphicon glyphicon-user"></span>&nbsp;&nbsp;<b>商家用户管理</b>
                            </a>
                        </li>
                        <li>
                            <a href="#" id="user"><!-- 无效会员 -->
                                <span class="glyphicon glyphicon-user"></span>&nbsp;&nbsp;<b>个人用户管理</b>
                            </a>
                        </li>
                        <li>
                            <a href="#" id="log"><!-- 无效会员 -->
                                <span class="glyphicon glyphicon-user"></span>&nbsp;&nbsp;<b>用户日志管理</b>
                            </a>
                        </li>
                        <li>
                            <a href="#" id="permission"><!-- 无效会员 -->
                                <span class="glyphicon glyphicon-user"></span>&nbsp;&nbsp;<b>账号权限管理</b>
                            </a>
                        </li>
                    </ul>
                </li>
                <li class="panel">
                    <a href="#sub3" data-toggle="collapse" data-parent="#myPanel"> 课程管理
                        <span class="glyphicon glyphicon-triangle-bottom pull-right"></span>
                    </a>
                    <ul id="sub3" class="nav panel-collapse collapse">
                        <li>
                            <a href="#" id="showGoodsType">
                                <span class="glyphicon glyphicon-record"></span>&nbsp;&nbsp;查看课程分类
                            </a>
                        </li>
                        <li>
                            <a href="#" id="addGoodsType">
                                <span class="glyphicon glyphicon-plus"></span>&nbsp;&nbsp;添加课程分类
                            </a>
                        </li>
                        <li>
                            <a href="#" id="showGoods" >
                                <span class="glyphicon glyphicon-record"></span>&nbsp;&nbsp;查看课程
                            </a>
                        </li>
                        <li>
                            <a href="#" id="addGoods">
                                <span class="glyphicon glyphicon-plus"></span>&nbsp;&nbsp;添加课程
                            </a>
                        </li>
                    </ul>
                </li>
                <li class="panel">
                    <a href="#sub2" data-toggle="collapse" data-parent="#myPanel"> 订单管理
                        <span class="glyphicon glyphicon-triangle-bottom pull-right"></span>
                    </a>
                    <ul id="sub2" class="nav panel-collapse collapse">
                        <li>
                            <a href="#" id="showOrder">
                                <span class="glyphicon glyphicon-record"></span>&nbsp;&nbsp;查看订单
                            </a>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </nav>
    <!--右侧部分-->
    <div class="page_main" style="height: 1000px;">
        <div class="dv_content" frameborder="0" scrolling="no" style="height: 800px;">

            <script type="text/javascript"style="height: 1000px;">
                $(function () {
                    $("#merchants").click(function(){
                        $(".dv_content").load('./userList.html');
                    })
                    $("#invalid").click(function(){
                        // $(".dv_content").attr("src","${pageContext.request.contextPath}/admin/invalidUser.jsp");
                    })
                    $("#showGoodsType").click(function(){
                        $(".dv_content").load('./showGoodsType.html');
                    })
                    $("#addGoodsType").click(function(){
                        $(".dv_content").load('./addGoodsType.html');
                    })
                    $("#showGoods").click(function(){
                        $(".dv_content").load('./showGoods.html');
                    })
                    $("#addGoods").click(function(){
                        $(".dv_content").load('./addGoods.html');
                    })
                    $("#showOrder").click(function(){
                        $(".dv_content").load('./showAllOrder.html');
                    })
                })
            </script>

        </div>
    </div>
</div>
<script>
    function UserLogout() {
        if (confirm("确认要退出登录吗?")) {

            let url = "user/logout";

            //ajax 请求后台
            $.ajax({
                url: "http://localhost:8080/shop_api/user/logout",
                method: "post",
                success: function (resp) {
                    localStorage.clear();
                    window.location.href = "http://localhost:8080/shop_app/firstPage.html";
                }

            });
            // // let params = {id:id};
            // console.log(params);
            // httpPost(url, params, function () {
            //     window.location.href="http://localhost:8080/shop_app/firstPage.html";
            // });
        }
    }
</script>
</body>
</html>